<template>
  <div class="container">
    <div class="layout">
      <el-card
        class="box"
        shadow="hover"
        v-for="(item, index) in 12"
        :key="index"
      >
        {{ item }}
      </el-card>
    </div>
    <div class="two">
      <div class="box2">1</div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
.container {
  height: 100vh;
}
.two {
  display: grid;
  place-items: center; /*核心代码*/
  background: #6ba3e4;
  width: 100%;
  height: 20vh;
  .box2 {
    width: 1.3333rem;
    height: 1.3333rem;
    font-size: 0.5333rem;
    text-align: center;
    background: #c350ce;
  }
}
.layout {
  padding: 0.4rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0.4rem;
  justify-content: center;
  height: 40vh;
  // background: #6ba3e4;
  margin-bottom: 0.6667rem;
  .box {
    // background: #4ad187;
    font-size: 0.5333rem;
    text-align: center;
  }
  :nth-child(2) {
    grid-column: 2 / 6;
    grid-row: 2 / 6;
  }
}
</style>
